<template>
  <view class="reminder_page">
    <!-- tips  -->
    <view class="tips">
      <!-- <text class="tips_icon">x</text> -->
      <view class="content">
        <u-icon name="close" class="mr-10"></u-icon>
        <text class="tips_content"> 开启系统通知,订单聊天等信息不错过 </text>
      </view>
    </view>
    <!-- tip end -->

    <view class="reminder_main">
      <view>
        <u-swipe-action
          :index="index"
          v-for="(item, index) in reminderList"
          :key="item.id"
          @click="click"
          @open="open"
          :options="options"
          :btn-Width="btnWidth"
        >
          <view class="item u-border-bottom">
            <!-- <image mode="aspectFill" :src="item.images" /> -->
            <!-- 此层wrap在此为必写的，否则可能会出现标题定位错误 -->
            <view class="title-wrap">
              <view class="read_tip" v-show="!item.readed"> [ 未读 ] </view>
              <text class="title u-line-2">{{ item.content }}</text>
              <text class="time u-line-2">{{ item.createTime }} </text>
            </view>
          </view>
        </u-swipe-action>
      </view>
    </view>

    <view class="tar_bottom">
      <view class="btn" @tap.stop="handerReadAll()">全部已读</view>
    </view>
  </view>
</template>


<script>
export default {
  data() {
    return {
      reminderList: [],
      disabled: false,
      btnWidth: 50,
      show: false,
      options: [
        {
          text: "已读",
          style: {
            backgroundColor: "#007aff",
          },
        },
      ],
    };
  },
  computed: {
    comReminderList() {
      this.reminderList.list.forEach((r) => {
        // r.show = false
        this.$set(r, "show", false);
      });
      return this.reminderList.list;
    },
    reminderTarget() {
      return (id) => {
        this.reminderList.filter((r) => {
          return r.id === id;
        });
      };
    },
  },
  async onLoad() {
    this.init();
  },
  async onPullDownRefresh() {
    await this.init();
    uni.stopPullDownRefresh(); //停止下拉刷新动画
  },
  methods: {
    async init() {
      let that = this;
      await that.$u.api.getAllReminder().then((res) => {
        console.log(res.list);
        that.reminderList = res.list;
      });
    },
    // 已读全部
    handerReadAll() {
      // this.$u.api.putAllReminder();
      this.reminderList.forEach((r) => {
        this.$set(r, "readed", 1);
      });
      this.$u.api.putAllReminder().then((res) => {
        this.$u.toast("已设置全部已读.");
      });
    },
    // 滑动后 的 点击事件
    click(index, index1) {},
    // 可以修改
    close(index) {
      this.$set(
        this.reminderList,
        index,
        Object.assign({}, this.reminderList[index], { show: false })
      );
    },
    // 如果打开一个的时候，不需要关闭其他，则无需实现本方法
    open(index) {
      if (this.reminderList[index].readed == 0) {
        let p = {
          id: this.reminderList[index].id,
        };
        this.$u.api.getReadedReminder(p);
        this.$u.toast("已读");
        this.$set(this.reminderList[index], "readed", 1);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./reminder.scss";

image {
  width: 120rpx;
  flex: 0 0 120rpx;
  height: 120rpx;
  margin-right: 20rpx;
  border-radius: 12rpx;
}
</style>
